92:I[903690,["/chat-static/_next/static/chunks/1hm3q0j7vx_jl.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/30cg74pivru03.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1v3tu-ayeqrg_.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/2ir1-mfl-mxun.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/3139m71i45f_m.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1d27q4_h4it5w.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/24itveg68o90k.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/10df6ghephwfh.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/3g-fs4xgai-g5.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/45cgj0o2dd5ka.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1vo2s82fx-91j.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/2b7mx-6g-n-p-.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/3qbqqz-30yf_e.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/0n2vqkuu3m7mv.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/151itv_w2dl-d.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/2oig3hoirmj64.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1pzl0qjyusfha.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1ilnu97ogkb5i.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/0wkini5l9f_9s.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1zvm-f33paz4c.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/43emq6v2fv13u.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/02rh369i5mh-5.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/2iu_2gtqlb9fh.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1e1jj32nu3059.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/054nyoml5t8yc.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/0tmnhs5rj_pj7.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/3z0af037uy3y2.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/130lebo2db7jj.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/2ffzcp23_gird.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/311y33ni2zbzy.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/0b2jr5pl--hcz.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/3ji6b0r5j__17.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/01ptiup-2nj2g.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/346rh7hczex73.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/0ite474mxrjfz.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/0rr2h1ez7ud1-.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/0xushjtk7v84v.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/42e91lyqcvypr.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo"],"ExplicitChatIdProvider"] 93:I[838238,["/chat-static/_next/static/chunks/1hm3q0j7vx_jl.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/30cg74pivru03.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1v3tu-ayeqrg_.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/2ir1-mfl-mxun.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/3139m71i45f_m.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1d27q4_h4it5w.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/24itveg68o90k.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/10df6ghephwfh.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/3g-fs4xgai-g5.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/45cgj0o2dd5ka.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1vo2s82fx-91j.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/2b7mx-6g-n-p-.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/3qbqqz-30yf_e.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/0n2vqkuu3m7mv.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/151itv_w2dl-d.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/2oig3hoirmj64.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1pzl0qjyusfha.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1ilnu97ogkb5i.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/0wkini5l9f_9s.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1zvm-f33paz4c.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/43emq6v2fv13u.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/02rh369i5mh-5.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/2iu_2gtqlb9fh.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1e1jj32nu3059.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/054nyoml5t8yc.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/0tmnhs5rj_pj7.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/3z0af037uy3y2.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/130lebo2db7jj.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/2ffzcp23_gird.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/311y33ni2zbzy.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/0b2jr5pl--hcz.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/3ji6b0r5j__17.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/01ptiup-2nj2g.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/346rh7hczex73.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/0ite474mxrjfz.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/0rr2h1ez7ud1-.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/0xushjtk7v84v.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/42e91lyqcvypr.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo"],"SWRDataProvider"] 94:T8b1f,[V0_FILE]javascript:file="postcss.config.mjs" export default { plugins: { '@tailwindcss/postcss': {}, }, } [V0_FILE]javascript:file="next.config.mjs" /** @type {import('next').NextConfig} */ const nextConfig = { typescript: { ignoreBuildErrors: true, }, images: { unoptimized: true, }, transpilePackages: [ '@vercel/geistcn', '@vercel/geist-test-utils', '@vercel/next-themes', ], experimental: { cssChunking: 'strict', }, modularizeImports: { '@vercel/geistcn/components': { transform: '@vercel/geist/components/{{ kebabCase member }}', skipDefaultConversion: true, }, '@vercel/geistcn/logos': { transform: '@vercel/geist/logos/{{ kebabCase member }}', skipDefaultConversion: true, }, }, } export default nextConfig [V0_FILE]json:file="package.json" { "name": "geistcn-design-system", "version": "0.1.0", "private": true, "scripts": { "build": "next build", "dev": "next dev", "start": "next start" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "latest", "@vercel/geistcn": "latest", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.7", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^2.5.5", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]json:file="tsconfig.json" { "compilerOptions": { "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "target": "ES6", "skipLibCheck": true, "strict": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "plugins": [ { "name": "next" } ], "paths": { "@/*": ["./*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from 'react' import type { Metadata } from 'next' import { Geist, Geist_Mono } from 'next/font/google' import { Analytics } from '@vercel/analytics/next' import { Providers } from './providers' import './globals.css' const _geist = Geist({ subsets: ['latin'] }) const _geistMono = Geist_Mono({ subsets: ['latin'] }) export const metadata: Metadata = { title: 'v0 App', description: 'Created with v0', generator: 'v0.app', } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import type React from "react" import { useState } from "react" import { Button } from "@vercel/geistcn/components/button" import { Input } from "@vercel/geistcn/components/input" import { Badge } from "@vercel/geistcn/components/badge" import { Card } from "@vercel/geistcn/components/card" import { Tabs } from "@vercel/geistcn/components/tabs" import { Avatar } from "@vercel/geistcn/components/avatar" import { Toggle } from "@vercel/geistcn/components/toggle" import { Checkbox } from "@vercel/geistcn/components/checkbox" import { Select } from "@vercel/geistcn/components/select" import { Textarea } from "@vercel/geistcn/components/textarea" import { Note } from "@vercel/geistcn/components/note" import { Spinner } from "@vercel/geistcn/components/spinner" import { Skeleton } from "@vercel/geistcn/components/skeleton" import { Snippet } from "@vercel/geistcn/components/snippet" import { Gauge } from "@vercel/geistcn/components/gauge" import { StatusDot } from "@vercel/geistcn/components/status-dot" import { LoadingDots } from "@vercel/geistcn/components/loading-dots" import { Tooltip } from "@vercel/geistcn/components/tooltip" import { Switch } from "@vercel/geistcn/components/switch" import { LogoVercel, Sparkles, ArrowRight, MagnifyingGlass, Bell, SettingsGear, Code, Lightning, Globe, } from "@vercel/geistcn/icons" export default function ShowcasePage() { const [selectedTab, setSelectedTab] = useState("components") const [toggleEnabled, setToggleEnabled] = useState(true) const [checkbox1, setCheckbox1] = useState(true) const [checkbox2, setCheckbox2] = useState(false) const tabs = [ { title: "Components", value: "components" }, { title: "Forms", value: "forms" }, { title: "Feedback", value: "feedback" }, { title: "Data Display", value: "data" }, ] return (

{/* Hero Section */}

Geistcn

A beautiful design system built for the modern web. Explore the components that power Vercel's products.

{/* Tabs Navigation */}

{/* Components Section */} {selectedTab === "components" && (

{/* Buttons */}

{/* Badges */}

Default Blue Success Warning Error Purple Teal Pink

Gray Subtle Blue Subtle Green Subtle Amber Subtle Red Subtle

Small Medium Large Turbo Trial

{/* Cards */}


                    Code First


                  Build with the tools you know and love.


                
                  
                    
                    Fast
                  
                  Optimized for performance out of the box.
                
                
                  
                    
                    Global
                  
                  Deploy anywhere in seconds.



            {/* Avatars */}
            
              
                
                
                
                
                
              
            

            {/* Switch */}


        )}

        {/* Forms Section */}
        {selectedTab === "forms" && (
          
            {/* Inputs */}
            
              
                
                
                } />
                
              
            

            {/* Textarea */}
            
              
                              </div>
            </ShowcaseSection>

            {/* Select */}
            <ShowcaseSection title="Select" description="Dropdown selection component.">
              <div className="grid gap-6 md:grid-cols-2">
                <Select label="Framework" placeholder="Select framework...">
                  <option value="next">Next.js</option>
                  <option value="remix">Remix</option>
                  <option value="nuxt">Nuxt</option>
                  <option value="svelte">SvelteKit</option>
                </Select>
                <Select label="Region" placeholder="Select region...">
                  <option value="us">United States</option>
                  <option value="eu">Europe</option>
                  <option value="ap">Asia Pacific</option>
                </Select>
              </div>
            </ShowcaseSection>

            {/* Toggle & Checkbox */}
            <ShowcaseSection title="Toggle & Checkbox" description="Binary selection controls.">
              <div className="space-y-6">
                <div className="flex flex-wrap items-center gap-8">
                  <Toggle checked={toggleEnabled} onChange={setToggleEnabled}>
                    Enable Notifications
                  </Toggle>
                  <Toggle checked={!toggleEnabled} onChange={(v) => setToggleEnabled(!v)} size="large">
                    Dark Mode
                  </Toggle>
                </div>
                <div className="flex flex-wrap items-center gap-6">
                  <Checkbox checked={checkbox1} onChange={() => setCheckbox1(!checkbox1)}>
                    Accept terms and conditions
                  </Checkbox>
                  <Checkbox checked={checkbox2} onChange={() => setCheckbox2(!checkbox2)}>
                    Subscribe to newsletter
                  </Checkbox>
                  <Checkbox indeterminate>Select all</Checkbox>
                </div>
              </div>
            </ShowcaseSection>
          </div>
        )}

        {/* Feedback Section */}
        {selectedTab === "feedback" && (
          <div className="space-y-12">
            {/* Notes */}
            <ShowcaseSection title="Notes" description="Callout components for displaying messages.">
              <div className="space-y-4">
                <Note>This is a default informational note with helpful context.</Note>
                <Note type="success">Your changes have been saved successfully.</Note>
                <Note type="warning">Please review your settings before continuing.</Note>
                <Note type="error">An error occurred while processing your request.</Note>
              </div>
            </ShowcaseSection>

            {/* Loading States */}
            <ShowcaseSection title="Loading States" description="Visual indicators for loading content.">
              <div className="flex flex-wrap items-center gap-8">
                <div className="flex flex-col items-center gap-2">
                  <Spinner size={24} />
                  <span className="text-copy-13 text-gray-900">Spinner</span>
                </div>
                <div className="flex flex-col items-center gap-2">
                  <Spinner size={32} />
                  <span className="text-copy-13 text-gray-900">Medium</span>
                </div>
                <div className="flex flex-col items-center gap-2">
                  <Spinner size={40} />
                  <span className="text-copy-13 text-gray-900">Large</span>
                </div>
                <div className="flex flex-col items-center gap-2">
                  <LoadingDots size={4} />
                  <span className="text-copy-13 text-gray-900">Loading Dots</span>
                </div>
              </div>
            </ShowcaseSection>

            {/* Skeleton */}
            <ShowcaseSection title="Skeleton" description="Placeholder loading states for content.">
              <div className="space-y-4">
                <div className="flex items-center gap-4">
                  <Skeleton rounded width={48} height={48} />
                  <div className="space-y-2">
                    <Skeleton width={200} height={16} />
                    <Skeleton width={150} height={12} />
                  </div>
                </div>
                <Skeleton width="100%" height={100} rounded />
                <div className="flex gap-4">
                  <Skeleton width={120} height={32} pill />
                  <Skeleton width={120} height={32} pill />
                </div>
              </div>
            </ShowcaseSection>

            {/* Tooltips */}
            <ShowcaseSection title="Tooltips" description="Helpful hints on hover.">
              <div className="flex flex-wrap items-center gap-6">
                <Tooltip text="This is a tooltip">
                  <Button variant="secondary" size="small">
                    Hover Me
                  </Button>
                </Tooltip>
                <Tooltip text="Settings and preferences" position="bottom">
                  <Button variant="secondary" size="small" svgOnly aria-label="Settings">
                    <SettingsGear size={16} />
                  </Button>
                </Tooltip>
                <Tooltip text="View notifications" position="right">
                  <Button variant="secondary" size="small" svgOnly aria-label="Notifications">
                    <Bell size={16} />
                  </Button>
                </Tooltip>
              </div>
            </ShowcaseSection>
          </div>
        )}

        {/* Data Display Section */}
        {selectedTab === "data" && (
          <div className="space-y-12">
            {/* Gauges */}
            <ShowcaseSection title="Gauges" description="Circular progress indicators.">
              <div className="flex flex-wrap items-end gap-8">
                <div className="flex flex-col items-center gap-2">
                  <Gauge value={25} size="medium" />
                  <span className="text-copy-13 text-gray-900">25%</span>
                </div>
                <div className="flex flex-col items-center gap-2">
                  <Gauge value={50} size="medium" />
                  <span className="text-copy-13 text-gray-900">50%</span>
                </div>
                <div className="flex flex-col items-center gap-2">
                  <Gauge value={75} size="medium" />
                  <span className="text-copy-13 text-gray-900">75%</span>
                </div>
                <div className="flex flex-col items-center gap-2">
                  <Gauge value={95} size="medium" />
                  <span className="text-copy-13 text-gray-900">95%</span>
                </div>
                <div className="flex flex-col items-center gap-2">
                  <Gauge value={85} size="large" showValue />
                  <span className="text-copy-13 text-gray-900">With Value</span>
                </div>
              </div>
            </ShowcaseSection>

            {/* Status Dots */}
            <ShowcaseSection title="Status Dots" description="Deployment status indicators.">
              <div className="flex flex-wrap items-center gap-6">
                <StatusDot state="READY" label />
                <StatusDot state="BUILDING" label />
                <StatusDot state="QUEUED" label />
                <StatusDot state="ERROR" label />
                <StatusDot state="CANCELED" label />
              </div>
            </ShowcaseSection>

            {/* Snippets */}
            <ShowcaseSection title="Snippets" description="Code snippets with copy functionality.">
              <div className="space-y-4 max-w-2xl">
                <Snippet text="npm install @vercel/geistcn" />
                <Snippet text="npx create-next-app@latest" />
                <Snippet text={["git clone https://github.com/vercel/next.js", "cd next.js", "npm install"]} />
              </div>
            </ShowcaseSection>

            {/* Combined Example */}
            <ShowcaseSection title="Combined Example" description="A real-world card combining multiple components.">
              <Card border className="max-w-md p-6">
                <div className="mb-4 flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <Avatar letter="PR" size={40} placeholder />
                    <div>
                      <h3 className="text-label-14 text-gray-1000">Production</h3>
                      <p className="text-copy-13 text-gray-900">main branch</p>
                    </div>
                  </div>
                  <Badge variant="green">Live</Badge>
                </div>
                <div className="mb-4 flex items-center gap-4">
                  <div className="flex items-center gap-2">
                    <StatusDot state="READY" />
                    <span className="text-copy-13 text-gray-900">Deployed</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <Gauge value={92} size="tiny" />
                    <span className="text-copy-13 text-gray-900">Performance</span>
                  </div>
                </div>
                <div className="flex gap-3">
                  <Button variant="primary" size="small">
                    Visit
                  </Button>
                  <Button variant="secondary" size="small">
                    Logs
                  </Button>
                </div>
              </Card>
            </ShowcaseSection>
          </div>
        )}
      </div>

      {/* Footer */}
      <footer className="border-t border-gray-alpha-200 bg-background-100 px-6 py-8">
        <div className="mx-auto flex max-w-5xl items-center justify-between">
          <div className="flex items-center gap-2">
            <LogoVercel size={20} />
            <span className="text-copy-14 text-gray-900">Geistcn Design System</span>
          </div>
          <p className="text-copy-13 text-gray-900">Built with Next.js and Tailwind CSS</p>
        </div>
      </footer>
    </main>
  )
}

function ShowcaseSection({
  title,
  description,
  children,
}: {
  title: string
  description: string
  children: React.ReactNode
}) {
  return (
    <section>
      <div className="mb-6">
        <h2 className="text-heading-24 mb-1 text-gray-1000">{title}</h2>
        <p className="text-copy-14 text-gray-900">{description}</p>
      </div>
      <div className="space-y-6">{children}</div>
    </section>
  )
}
[V0_FILE]css:file="app/globals.css"
@import '@vercel/geistcn/tailwind.css';
@import '@vercel/geistcn/styles.css';

/* Tell Tailwind to scan the geistcn package for class usage */
@source "../node_modules/@vercel/geistcn";
[V0_FILE]typescriptreact:file="app/providers.tsx"
'use client'

import type React from 'react'

// ts-ignore-next-line
import { GeistProvider } from '@vercel/geistcn/core/provider'

export function Providers({ children }: { children: React.ReactNode }) {
  return <GeistProvider>{children}</GeistProvider>
}
[V0_FILE]css:file="styles/globals.css"
@import 'tailwindcss';
@import 'tw-animate-css';

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  --font-sans: 'Geist', 'Geist Fallback';
  --font-mono: 'Geist Mono', 'Geist Mono Fallback';
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]typescript:file="hooks/use-mobile.ts"
import * as React from 'react'

const MOBILE_BREAKPOINT = 768

export function useIsMobile() {
  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)

  React.useEffect(() => {
    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
    const onChange = () => {
      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    }
    mql.addEventListener('change', onChange)
    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    return () => mql.removeEventListener('change', onChange)
  }, [])

  return !!isMobile
}
[V0_FILE]typescript:file="hooks/use-toast.ts"
'use client'

// Inspired by react-hot-toast library
import * as React from 'react'

import type { ToastActionElement, ToastProps } from '@/components/ui/toast'

const TOAST_LIMIT = 1
const TOAST_REMOVE_DELAY = 1000000

type ToasterToast = ToastProps & {
  id: string
  title?: React.ReactNode
  description?: React.ReactNode
  action?: ToastActionElement
}

const actionTypes = {
  ADD_TOAST: 'ADD_TOAST',
  UPDATE_TOAST: 'UPDATE_TOAST',
  DISMISS_TOAST: 'DISMISS_TOAST',
  REMOVE_TOAST: 'REMOVE_TOAST',
} as const

let count = 0

function genId() {
  count = (count + 1) % Number.MAX_SAFE_INTEGER
  return count.toString()
}

type ActionType = typeof actionTypes

type Action =
  | {
      type: ActionType['ADD_TOAST']
      toast: ToasterToast
    }
  | {
      type: ActionType['UPDATE_TOAST']
      toast: Partial<ToasterToast>
    }
  | {
      type: ActionType['DISMISS_TOAST']
      toastId?: ToasterToast['id']
    }
  | {
      type: ActionType['REMOVE_TOAST']
      toastId?: ToasterToast['id']
    }

interface State {
  toasts: ToasterToast[]
}

const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()

const addToRemoveQueue = (toastId: string) => {
  if (toastTimeouts.has(toastId)) {
    return
  }

  const timeout = setTimeout(() => {
    toastTimeouts.delete(toastId)
    dispatch({
      type: 'REMOVE_TOAST',
      toastId: toastId,
    })
  }, TOAST_REMOVE_DELAY)

  toastTimeouts.set(toastId, timeout)
}

export const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case 'ADD_TOAST':
      return {
        ...state,
        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
      }

    case 'UPDATE_TOAST':
      return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === action.toast.id ? { ...t, ...action.toast } : t,
        ),
      }

    case 'DISMISS_TOAST': {
      const { toastId } = action

      // ! Side effects ! - This could be extracted into a dismissToast() action,
      // but I'll keep it here for simplicity
      if (toastId) {
        addToRemoveQueue(toastId)
      } else {
        state.toasts.forEach((toast) => {
          addToRemoveQueue(toast.id)
        })
      }

      return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === toastId || toastId === undefined
            ? {
                ...t,
                open: false,
              }
            : t,
        ),
      }
    }
    case 'REMOVE_TOAST':
      if (action.toastId === undefined) {
        return {
          ...state,
          toasts: [],
        }
      }
      return {
        ...state,
        toasts: state.toasts.filter((t) => t.id !== action.toastId),
      }
  }
}

const listeners: Array<(state: State) => void> = []

let memoryState: State = { toasts: [] }

function dispatch(action: Action) {
  memoryState = reducer(memoryState, action)
  listeners.forEach((listener) => {
    listener(memoryState)
  })
}

type Toast = Omit<ToasterToast, 'id'>

function toast({ ...props }: Toast) {
  const id = genId()

  const update = (props: ToasterToast) =>
    dispatch({
      type: 'UPDATE_TOAST',
      toast: { ...props, id },
    })
  const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id })

  dispatch({
    type: 'ADD_TOAST',
    toast: {
      ...props,
      id,
      open: true,
      onOpenChange: (open) => {
        if (!open) dismiss()
      },
    },
  })

  return {
    id: id,
    dismiss,
    update,
  }
}

function useToast() {
  const [state, setState] = React.useState<State>(memoryState)

  React.useEffect(() => {
    listeners.push(setState)
    return () => {
      const index = listeners.indexOf(setState)
      if (index > -1) {
        listeners.splice(index, 1)
      }
    }
  }, [state])

  return {
    ...state,
    toast,
    dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
  }
}

export { useToast, toast }
[V0_FILE]typescript:file="lib/utils.ts"
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}88:["$","$L92",null,{"chatId":"rDVdApnue6K","children":["$","$L93",null,{"data":{"@\"active-block\",\"rDVdApnue6K\",":{"id":"b_5gZtD0cLutX","messageId":"t9piinRVWIFysZvpIs0BikS3xc1uQq2r","source":"$94","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"Code","type":"code-project","project":"Code"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"rDVdApnue6K\",":true,"":null},"children":"$L95"}]}]
</article></body></html>

About

Tags

Share

About

Tags

Share

More from sahaj-jj

More Templates Like This